<template>
	<view class="add page c00" v-if="detail != null">
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">
				<view class="flex flexC borb py12" @click="clickUpdate('name',detail.name)">
					<text class="flex1">包厢名字</text>
					<text class="py3">{{detail.name}}</text>
					<text class="arrowR ml3"></text>

				</view>
				
				<view class="flex flexC borb py12">
					<text class="flex1">包厢分类</text>
					<picker class="flex1" @change="bindPickerTypeChange" :value="index" :range="typeList">
						<view class="py3" style="text-align: right;">{{roomTypeValue}}</view>
					</picker>
					<text class="arrowR ml3"></text>
				</view>
				
				<view class="flex flexC borb py12" @click="clickUpdate('hour_price',detail.hour_price)">
					<text class="flex1">价格/小时</text>
					<text class="bgf6 r40 px12 py3">{{detail.hour_price}}元</text>
					<text class="arrowR ml3"></text>

				</view>
				<view class="flex flexC borb py12" @click="clickUpdate('weigh',detail.weigh)">
					<text class="flex1">包厢排序</text>
					<text class="py3">{{detail.weigh}}</text>
					<text class="arrowR ml3"></text>
				</view>

				<picker @change="specPickerChange" :value="index" :range="array">
					<view class="flex flexC borb py12">
						<text class="flex1">包厢大小</text>
						<text class="py3" v-if="detail.spec == 1" >小包</text>
						<text class="py3" v-else-if="detail.spec == 2" >中包</text>
						<text class="py3" v-else-if="detail.spec == 3" >大包</text>
						
						<text class="arrowR ml3"></text>
					</view>
				</picker>

				<view class="flex flexC borb py12" @click="clickUpdate('min_book_hour',detail.min_book_hour)">
					<text class="flex1">起订时间</text>
					<text class="py3">{{detail.min_book_hour}}小时</text>
					<text class="arrowR ml3"></text>
				</view>
				<view class="flex flexC borb py12" @click="$refs.statusPop.open()">
					<text class="flex1">包厢状态</text>
					<text class="py3">{{detail.status_txt}}</text>
					<text class="arrowR ml3"></text>
				</view>

				<view class="flex flexC borb py12" @click="updateLogo">
					<text class="flex1">包厢LOGO</text>
					<image class="w48" :src="detail.logo_url" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>

				<view class="flex flexC borb py12" @click="lookCode()">
					<text class="flex1">包厢二维码</text>
					<image class="w48" :src="codeUrl" mode="aspectFill"></image>
					<text class="arrowR ml3"></text>
				</view>

				<view class="flex flexC borb py12" @click="clickUpdate('back_score',detail.back_score)">
					<text class="flex1">预定返现(积分)</text>
					<text class="py3">{{detail.back_score}}</text>
					<text class="arrowR ml3"></text>
				</view>

				<view class="flex flexC borb py12" @click="clickUpdate('book_score',detail.book_score)">
					<text class="flex1">预定抵扣(积分)</text>
					<text class="py3">{{detail.book_score}}</text>
					<text class="arrowR ml3"></text>
				</view>



				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">包厢标签</text>
					<view class="flex flexC flexW flex1">
						<text@click="delTag(item)" v-for="(item,index) in detail.tagList" :key="index"
							class="bgf6 mb6 r40 px12 py4 mr6">{{item}}</text>
							<text@click="addTag" class="bged mb6 r40 px15 py4">添加</text>
					</view>
				</view>
				<view class="pt12">
					<text class="mr14 pt3">包厢相册</text>
					<view class="flex flexC flexW mt12">
						<view class="imgbox r4 mr14 mb10" v-for="(item,index) in detail.coverList" :key="index">
							<image class="r4" :src="item.cover_url" mode="aspectFill"></image>
							<text @click="doRemoveCover(item.cover)"
								class="bgf6 cff fs16 r50 pb2 boxS del flexC flex flexJC">×</text>
						</view>
						<view @click="addCover" class="imgbox c99 r4 mb10 fs30 flexC flex flexJC">+</view>
					</view>
				</view>
			</view>
			<view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bgff0 r40" @click="clickDelete">删除</view>
			</view>



		</view>

		<uni-popup ref="statusPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="updateStatus('clean')">清除打扫状态</button>
				<view class="popup-btn" @click="updateStatus('free')">营业中</view>
				<view class="popup-btn" @click="updateStatus('stop')">维护中</view>

				<view class="popup-btn" @click="$refs.statusPop.close()">取消</view>
			</view>

		</uni-popup>

		<uni-popup ref="tagPop" type="bottom">
			<view class="popup-content2">
				<button v-if="role != '店长'" class="popup-btn button" @click="doDelTag()">删除</button>

				<view class="popup-btn" @click="$refs.tagPop.close()">取消</view>
			</view>

		</uni-popup>

		<hFormAlert v-if="tagShow" title="添加标签" placeholder="请输入添加标签" @confirm="confirm" @cancel="cancel"></hFormAlert>


	</view>
</template>

<script>
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';

	export default {
		components: {
			hFormAlert
		},
		data() {
			return {
				room_id: '',
				detail: null,
				tagShow: false,
				codeUrl: '',
				array: ['小包(1~8人)', '中包(9~20)', '大包(21~30)'],
				role:'',
				roomTypeValue:'KTV',
				typeList:['KTV','棋牌'],

			};
		},
		onLoad(option) {
			this.role = uni.getStorageSync("role");
			console.info("===role=="+this.role);
			this.room_id = option.id;
			this.getCodeUrl();
		},

		onShow() {
			this.getDetail();
		},
		methods: {
			
			bindPickerTypeChange(e){
				this.roomTypeValue = e.detail.value;
				var is_ktv = -1;
				if(this.roomTypeValue == 'KTV'){
					is_ktv = 1;
				}
				
				let that = this;
				var param = {
					is_ktv: is_ktv,
					room_id: this.room_id
				
				};
				this.$api.updateRoom(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						uni.showToast({
							title:"修改成功",
							icon:'none'
						})
						this.getDetail();
					} else {
				
					}
				})
			},
			
			
			specPickerChange(e){
				var value = parseInt(e.detail.value);
				var index = value+1;
				
				console.info(value);
				let that = this;
				var param = {
					spec: index,
					room_id: this.room_id
				
				};
				this.$api.updateRoom(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						uni.showToast({
							title:"修改成功",
							icon:'none'
						})
						this.getDetail();
					} else {
				
					}
				})

			},

			clickDelete() {

				let that = this;
				uni.showModal({
					title: "删除提醒",
					content: "您是否确认删除此包厢",
					confirmText: "确认",
					complete(res) {
						if (res.confirm == true) {
							that.doDeleteRoom();
						}
					}
				})
			},
			doDeleteRoom() {
				let that = this;
				let param = {
					room_id: this.room_id
				}
				this.$api.deleteRoom(param).then(res => {

					if (res.code == 1) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},

			lookCode() {
				let image = Array();
				image.push(this.codeUrl);
				uni.previewImage({
					urls: image,
				});
			},

			getCodeUrl() {
				let that = this;
				let param = {
					room_id: this.room_id
				}
				this.$api.getRoomCodeUrl(param).then(res => {

					if (res.code == 1) {
						that.codeUrl = res.data;
					} else {

					}
				})

			},




			delTag(item) {
				this.currentTag = item;
				this.$refs.tagPop.open();
			},

			doRemoveCover(item) {
				let that = this;
				let param = {
					cover: item,
					room_id: this.room_id
				}
				this.$api.removeRoomCover(param).then(res => {

					if (res.code == 1) {
						that.getDetail();
					} else {

					}
				})

			},


			doDelTag() {
				this.$refs.tagPop.close();
				let that = this;
				let param = {
					tag: this.currentTag,
					room_id: this.room_id
				}
				this.$api.removeRoomTag(param).then(res => {

					if (res.code == 1) {
						that.getDetail();
					} else {

					}
				})

			},

			confirm(e) {
				this.tagShow = false;
				console.info(e.text);
				let that = this;
				let param = {
					tag: e.text,
					room_id: this.room_id
				}
				this.$api.updateRoom(param).then(res => {

					uni.hideLoading();
					if (res.code == 1) {
						that.getDetail();
					} else {

					}
				})
			},

			addTag() {
				this.tagShow = true;
			},

			cancel() {
				this.tagShow = false;
			},

			updateLogo() {
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg, 'logo');
						}
					}
				});
			},

			addCover() {
				let that = this;
				this.uploadType = "image";
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						//console.log(JSON.stringify(res.tempFilePaths));
						let images = res.tempFilePaths; //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						for (var i = 0; i < images.length; i++) {
							let tImg = images[i];
							that.upload(tImg, 'cover');
						}
					}
				});
			},


			upload(img, type) {

				let that = this;
				uni.showLoading({
					title: "上传中"
				})
				uni.uploadFile({
					url: this.$uploadUrl,
					filePath: img,
					name: 'file',
					success: (uploadFileRes) => {

						uni.hideLoading();
						var res = uploadFileRes.data;

						// 根据接口具体返回格式   赋值具体对应url
						var url = JSON.parse(res).data.fullurl;
						var uploadUrl = JSON.parse(res).data.url;
						if (type == 'logo') {
							that.requestUpdateLogo(uploadUrl);

						} else {
							that.requestUpdateCover(uploadUrl);
						}
					}
				});

			},

			requestUpdateLogo(logoUrl) {

				let that = this;
				let param = {
					logo: logoUrl,
					room_id: this.room_id
				}
				this.$api.updateRoom(param).then(res => {

					uni.hideLoading();
					if (res.code == 1) {
						that.getDetail();
					} else {

					}
				})
			},

			requestUpdateCover(logoUrl) {

				let that = this;
				let param = {
					cover: logoUrl,
					room_id: this.room_id
				}
				this.$api.updateRoom(param).then(res => {

					uni.hideLoading();
					if (res.code == 1) {
						that.getDetail();
					} else {

					}
				})
			},

			updateStatus(item) {

				let that = this;
				let param = {
					room_id: this.room_id,
					status: item
				}
				this.$refs.statusPop.close()
				this.$api.updateRoom(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						this.getDetail();
					} else {

					}
				})

			},



			clickUpdate(item, content) {

				var key = "name";
				var value = "包厢名字"
				if (item == 'name') {
					var key = "name";
					var value = "包厢名字"
				} else if (item == 'hour_price') {
					var key = "hour_price";
					var value = "价格/小时"
					if(this.role == '店长'){
						uni.showToast({
							title:"店长不允许修改价格",
							icon:'error'
						})
						return;
					}
				} else if (item == 'min_book_hour') {
					var key = "min_book_hour";
					var value = "起订时间"
				} else if (item == 'weigh') {
					var key = "weigh";
					var value = "包厢排序"
				} else if (item == "back_score") {
					var key = "back_score";
					var value = "预定返现(积分)"
				} else if (item == "book_score") {
					var key = "book_score";
					var value = "预定抵扣(积分)"
				}
				let that = this;

				uni.navigateTo({
					url: '../room/updateRoom?key=' + key + "&value=" + value + "&content=" + content +
						"&room_id=" + that.room_id
				})
			},

			getDetail() {
				let param = {
					room_id: this.room_id
				};
				let that = this;
				this.$api.roomDetail(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.detail = res.data;
						if(that.detail.is_ktv == 1){
							that.roomTypeValue = "KTV";
						}else{
							that.roomTypeValue = "棋牌";
							
						}
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		.w48 {
			width: 96rpx;
			height: 96rpx;
		}

		.imgbox {
			width: 164rpx;
			height: 164rpx;
			background-color: #E8E8E8;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
				background: rgba(181, 180, 180, .8);
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>